<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .dialog {
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dialog .mask {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .6;
      position: absolute;
      left: 0;
      top: 0;
    }

    .dialog .tip {
      width: 60%;
      height: 60%;
      background: #fff;
      z-index: 10;
    }

    .dialog .tip .btn span {
      display: inline-block;
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 10px;
      background: lightblue;
      margin: 40px;
    }

    .hide {
      display: none;
    }

    .btn-ol>li {
      display: inline-block;
      width: 35px;
      height: 35px;
      border-radius: 10px;
      margin: 5px;
      background: lightcoral;
      text-align: center;
      line-height: 35px;
      color: #fff;
    }
  </style>
</head>

<body>

  <h1>
    <button class="add-btn" style="width: 100px;height: 40px;">增加数据</button>
  </h1>

  <input type="text" class="search" /> <button class="searchBtn">搜索</button>

  <!-- dialog start-->
  <div class="dialog hide">
    <div class="mask"></div>
    <div class="tip">
      <div class="content-wrapper">
        <h1 style="color: blue;" class="title">添加数据</h1>
        name:<input type="text" class="name"> <br>
        gender: <input type="text" class="gender"> <br>
        address: <input type="text" class="address"> <br>
        date: <input type="date" class="date"> <br>
        <button class="btn">添加数据成功跳转到产品页面</button>
      </div>
      <div class="btn">
        <span class="close">取消</span>
        <span class="sure">确定</span>
      </div>
    </div>
  </div>
  <!-- dialog end -->

  <!-- page start -->
  <ul class="content">
  </ul>

  <ol class="btn-ol">
  </ol>
  <!-- page end -->


  <script src="js/axios.js"></script>
  <script>

    const dialog = document.querySelector('.dialog');
    const sure = document.querySelector('.sure');
    const close = document.querySelector('.close');
    const name = document.querySelector('.name')
    const gender = document.querySelector('.gender')
    const address = document.querySelector('.address')
    const date = document.querySelector('.date')
    const addBtn = document.querySelector('.add-btn')
    const title = document.querySelector('.title')
    // 搜索
    const searchBtn = document.querySelector('.searchBtn')
    const search = document.querySelector('.search')

    let pageIndex = 0; // 分页的下标

    // 封装两个函数 get post
    function get(url, params) {
      return axios.get(url, { params: params })
    }

    function post(url, data) {
      return axios.post(url, data)
    }

    init()
    function init() {
      getPage(pageIndex)
      searchFn()
      addFn()
    }
    // 搜索函数
    function searchFn() {
      searchBtn.onclick = function () {
        get('/api/search', { keyword: search.value.trim() })
          .then(res => {
            renderHtml(res)
          })
      }
      // searchBtn.onclick = async function () {
      //   let res = await get('/api/search', { keyword: search.value.trim() })
      //   renderHtml(res)
      // }
    }

    // 进入页面先请求数据 查询数据  page
    function getPage(page, size = 5) {
      get('/api/page', { page, size }).then(res => {
        console.log(res.data, 'res----page----page-删除后的分页数据')
        // 渲染页面
        renderHtml(res)
        // 渲染按钮
        renderbtn(res)
        // 删除事件
        deleteFn()
        updateFn()
      })
    }

    function renderHtml(res) {
      const content = document.querySelector('.content');
      let result = res.data.data;
      content.innerHTML = result.map((item, index) => {
        return `<li>
          <span>${item.id}</span> : 
          <span>${item.name}</span> 
          <span>${item.gender}</span> 
          <span>${item.address}</span> 
          <span>${item.date}</span> 
          <button class="updateBtn" data-id=${item.id}>更改</button>
          <button class="delBtn" data-id=${item.id}>删除</button>
          </li>`
      }).join('')
    }

    function renderbtn(res) {
      const btnContent = document.querySelector('.btn-ol');
      // 根据数据的总条数 计算按钮
      let btnNum = Math.ceil(res.data.total / 5)
      let str = ''
      for (let i = 0; i < btnNum; i++) {
        str += `<li>${i + 1}</li>`
      }
      btnContent.innerHTML = str;

      // 获取渲染之后的按钮
      const libtn = document.querySelectorAll('.btn-ol>li');
      libtn.forEach((item, index) => {
        item.onclick = function () {
          pageIndex = index;
          // 调用分页 重新请求数据
          getPage(pageIndex, 5)
        }
      })
    }

    // 按钮删除函数  删除
    function deleteFn() {
      const deleteBtn = document.querySelectorAll('.delBtn')
      deleteBtn.forEach((item, i) => {
        item.onclick = function () {
          const id = item.dataset.id;
          console.log(id, 'shanchu====id')
          let data = axios.get('/api/delete', { params: { id } })
            .then(res => {
              getPage(pageIndex, 5)
            })
        }
      })
    }
    // 增
    function addFn() {
      addBtn.onclick = function () {
        title.innerHTML = '增加数据'
        dialog.classList.remove('hide')
        dialogFn('/api/add')
      }
    }

    function dialogFn(url, id) {
      sure.onclick = function () {
        dialog.classList.add('hide')
        post(url, {
          id: id,
          name: name.value.trim(),
          gender: gender.value.trim(),
          address: address.value.trim(),
          date: date.value.trim(),
        }).then(res => {
          if (res.data.code === 0) {
            getPage(pageIndex)
          }
        })
      }
      // 关闭弹框
      close.onclick = function () {
        dialog.classList.add('hide')
      }
    }

    // 更新数据 
    function updateFn() {
      const updateBtn = document.querySelectorAll('.updateBtn');
      updateBtn.forEach((item, i) => {
        item.onclick = function () {
          title.innerHTML = '更新数据'
          // dataset.id/index   html  data-index/id
          const id = item.dataset.id;
          console.log(id, 'id')
          // 出现弹框
          dialog.classList.remove('hide')
          dialogFn('/api/update', id)
        }
      })
    }





  </script>
</body>

</html>